<template>
  <view class="scroll-bar">
    <view class="scroll-bar-img">
      <image src="~@/static/Index/call.png"/>
    </view>
    <view class="scroll-bar-body">
      <view class="scroll-bar-text">
        手机评教功能上线了，大家可以赶紧看看。
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "ScrollBar"
}
</script>

<style lang="scss" scoped>
//顶部滚动条
.scroll-bar {
  width: 100%;
  height: 50rpx;
  background-color: #FDF6EC;
  display: flex;
  align-items: center;

  .scroll-bar-img {
    width: 80rpx;
    height: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    & > image {
      width: 60%;
      height: 60%;
    }
  }

  @keyframes scroll-bar-text {
    0% {
      left: 610rpx;
    }
    100% {
      left: -610rpx;
    }
  }

  .scroll-bar-body {
    position: relative;
    width: 100%;
    height: 50rpx;
    overflow: hidden;
    .scroll-bar-text {
      top: 50%;
      transform: translate(0, -50%);
      z-index: 1;
      position: absolute;
      width: 600rpx;
      overflow: hidden;
      font-size: 26rpx;
      color: #FEC267;
      margin-left: 0;
      white-space: nowrap;
      animation: scroll-bar-text 8s linear infinite;
    }
  }

}

</style>